<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <script src="{{ url_for('static',filename='common/zlajax.js') }}"></script>
  <link rel="stylesheet" href="{{ url_for('static',filename='front/css/base.css') }}">
  <title>{% block title %}{% endblock %}</title>
    <!-- 自定义CSS，用于设置浅蓝色背景 -->
    <style>
        .btn-custom {
            color: #fff; /* 按钮文字颜色 */
            background-color: #007bff; /* 按钮背景颜色，可以是任意蓝色 */
            border: none; /* 移除Bootstrap默认的边框 */
            border-radius: 25px; /* 椭圆边框，值越大越圆 */
            padding: 10px 20px; /* 内边距 */
            font-size: 20px; /* 字体大小 */
        }
        .btn-custom:hover {
            background-color: #007bff; /* 悬停时的背景颜色，比原来稍深一些 */
        }
    </style>

  {% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="/"><h3>动植物数据库系统</h3></a>

  {% if g.user %}
  <!-- <a class="navbar-brand" href="{{url_for('user.user_analysis',user_id=g.user.id)}}"><h4>数据分析</h4></a> -->
  {% endif %}
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/"><h4>首页</h4> <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{{ url_for('image.image_detect') }}"><h4>图像识别</h4> <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item active">
        <a href="{{url_for('front.index_plant')}}" class="nav-link"><h4>植物</h4> <span class="sr-only">(current)</span></a>
      </li>

    </ul>

    <form class="form-inline my-lg-0" action="{{ url_for('front.search') }}" method="get">
      <input class="form-control mr-sm-2" type="search" placeholder="请输入关键字" aria-label="Search" name="search" id="search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><h4>搜索</h4></button>
    </form>
    <ul class="navbar-nav ml-4">
      {% if g.user %}
        {% if g.user.is_staff %}
          <li class="nav-item">
            <a href="{{ url_for('cms.index') }}" class="nav-link">管理系统</a>
          </li>
        {% endif %}
        <li class="nav-item">
          <a href="{{ url_for('user.profile',user_id=g.user.id) }}" class="nav-link">{{ g.user.username }}</a>
        </li>
        <li class="nav-item">
          <a href="{{ url_for('user.logout') }}" class="nav-link">退出登录</a>
        </li>
      {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{{ url_for('user.login') }}"><h4>登录</h4></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ url_for('user.register') }}"><h4>注册</h4></a>
        </li>
      {% endif %} 
    </ul>
  </div>
</nav>

<div class="left-background"></div>
<div class="main-container">
  {% block body %}{% endblock %}
</div>
</body>
</html>